<template>
   <div class="Back">
       <div id="WaitBox" class="flex">
          <div class="FlowEffect flex"></div>
          <div id="Wait" class="flex">
             {{(WaitInfo || 'Loading') +'.'.repeat(count)}}
          </div>
       </div>
   </div>
</template>
<script>
import {mapState} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Tool',['WaitInfo'])
     },
     data() {
        return {
            timer:null,
            count:0
        }
     },
     methods:{
        init(){
            this.timer=setInterval(() => {
                this.count=(this.count+1)%4
            }, 1000);
        }
     },
     mounted(){
        this.init()
     },
     beforeDestroy(){
        clearInterval(this.timer)
     }
  }
</script>
<style scoped lang='less'>
.Back{
    background: rgba(0, 0, 0, 0.6);
}
#WaitBox{
    width: 250px;
    height: 150px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin: 10px 0 ;

     #Wait{
         width:calc(100% - 10px);
         height:calc(100% - 10px);
         background: black;
          position: absolute;
          border-radius: 20px;
         z-index: 10;
         color: white;
         font-size: 20px;
         font-weight: 600;
     }

}
</style>